<div class="row">
  <div id="lora-upload-files-modal"></div>

  <div class="col-6">
    <div class="pane">
      <h3>Finetunes</h3>
      <div class="run-table-wrapper">
        <table class="table table-responsive mt-3 table-sm table-hover table-types">
          <thead>
            <tr>
              <th></th>
              <th></th>
              <th>Time</th>
              <th>Steps</th>
              <th></th>
              <th></th>
              <th></th>
            </tr>
          </thead>
          <tbody class="run-table">
            <tr>
              <td>No runs yet.</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>
      <button id="finetune-upload-lora-open-modal" class="btn btn-sm btn-outline-primary mt-1">Upload lora</button>
    </div>
    <div class="pane">
      <div class="start-funetune-select-model">
        <h3 style="margin-bottom: 15px;">Start New Finetune<span></span></h3>
        <h6>Select Project<span></span></h6>
        <select id="finetune-project" class="form-select" style="margin-bottom: 20px;" disabled>
          <option value="" selected disabled>Please create first project</option>
        </select>
        <div data-bs-toggle="modal" data-bs-target="#upload-tab-new-project-modal" class="finetune-new-project">Create new project...</div>
        <h6>Select Model<span></span></h6>
        <select id="finetune-model" class="form-select" style="margin-bottom: 20px;">
        </select>
      </div>
      <!-- <div class="start-funetune-step1">
        <h6>Step 1: Filtering<span></span></h6>
        <div class="start-funetune__inline">
          <button type="button" class="sources-run-button btn btn-primary"><i class="bi bi-funnel-fill"></i> Run filter</button>
          <button type="button" data-bs-toggle="modal" data-bs-target="#upload-tab-source-settings-modal" class="btn btn-outline-primary sources-settings">Settings</button>
        </div>
        <div class="start-filter-stats callout">
          <div class="ftf-progress progress d-none" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
            <div class="ftf-bar bg-success" style="width: 0%"></div>
          </div>
          <div class="ftf-eta"></div>
          <div class="ftf-status d-none">Status:<span></span></div>
          <div class="ftf-error d-none">Error:<span class="text-danger"></span></div>
          <div class="ftf-stats"></div>
        </div>
      </div> -->
      <div class="start-funetune-step2">
        <h6>Step 2: Training<span></span></h6>
        <div class="start-funetune__inline">
          <!-- <button id="run_now" type="button" class="btn btn-primary tab-finetune-run-now"><i class="bi bi-gpu-card"></i> Run Now</button> -->
          <button data-bs-toggle="modal" data-bs-target="#finetune-tab-settings-modal" type="button" disabled class="btn btn-primary tab-finetune-fine-settings">Start Finetune...</button>
        </div>

        <!-- <button data-bs-toggle="modal" data-bs-target="#finetune-tab-autorun-settings-modal" type="button" class="btn finetune-autorun btn-sm btn-outline-primary mt-1"><i class="bi bi-stopwatch-fill"></i>Autorun Settings</button> -->
      </div>
    </div>
  </div>

  <div class="col-6">
    <div class="pane">
      <img src="/tab-finetune-progress-svg/none" class="fine-gfx" alt="">
    </div>

    <div class="pane">
      <div class="start-finetune-stats d-none">
        <div class="start-finetune-wrap">
          <div class="ftune-progress progress d-none" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
            <div class="ftune-bar bg-success" style="width: 0%"></div>
          </div>
          <div class="ftune-eta"></div>
        </div>
        <button class="btn btn-danger btn-sm stop-finetune">Stop Run</button>
      </div>
      <ul class="nav nav-tabs" id="myTabs" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active" id="logs-tab" data-bs-toggle="tab" data-bs-target="#logs"
            type="button" role="tab" aria-controls="logs" aria-selected="true">Logs</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="checkpoints-tab" data-bs-toggle="tab" data-bs-target="#checkpoints"
            type="button" role="tab" aria-controls="checkpoints" aria-selected="false">Checkpoints</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="parameters-tab" data-bs-toggle="tab" data-bs-target="#parameters"
            type="button" role="tab" aria-controls="parameters" aria-selected="false">Parameters</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="files-tab" data-bs-toggle="tab" data-bs-target="#files"
            type="button" role="tab" aria-controls="files" aria-selected="false">Files</button>
        </li>
      </ul>

      <div class="tab-content mt-2" id="myTabContent">
        <div class="tab-pane fade show active" id="logs" role="tabpanel" aria-labelledby="logs-tab">
          <pre class="log-container tab-upload-finetune-logs">Select run to view logs.
          </pre>
          <a target="_blank" class="btn mt-2 btn-secondary log-link d-none" href="">View Log</a>
        </div>
        <div class="tab-pane fade" id="checkpoints" role="tabpanel" aria-labelledby="checkpoints-tab">
          <table class="table table-sm table-hover">
            <tbody class="table-checkpoints"></tbody>
          </table>
        </div>
        <div class="tab-pane fade show" id="parameters" role="tabpanel" aria-labelledby="parameters-tab">
          <pre class="params-container tab-upload-finetune-parameters">Select run to view parameters.
          </pre>
        </div>
        <div class="tab-pane fade show" id="files" role="tabpanel" aria-labelledby="files-tab">
          <pre class="files-container tab-upload-finetune-files">Select run to view files.
          </pre>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="delete-lora-modal" tabindex="-1" aria-labelledby="delete-lora-modal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="urlModalLabel">Delete Run</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          You are about to delete the run. This cannot be undone!
        </div>
        <div id="status-delete" class="deleted-status"></div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="button" class="delete-lora-modal-submit submit btn btn-primary">Delete</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="upload-tab-source-settings-modal" tabindex="-1" aria-labelledby="upload-tab-source-settings-modal" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="urlModalLabel">GPU-Based Filter Settings</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label for="filter_loss_threshold" class="form-label">Filter 1: File loss threshold</label>
            <input type="text" data-min="1" data-max="10" step="0.1" class="validate form-control" id="filter_loss_threshold">
            <div class="form-text">
              If initial loss is too big calculated on a single file, remove it. This likely means the file doesn't contain code, or the code is unusual. Min 1 - Max 10
            </div>
          </div>
          <div class="settings-error d-none"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="tab-upload-source-settings-default btn btn-secondary">Reset to defaults</button>
          <button class="tab-upload-source-settings-submit btn btn-primary">Apply</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="finetune-tab-settings-modal" tabindex="-1" aria-labelledby="finetune-tab-settings-modal" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="urlModalLabel">Launch Finetune</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="finetune-settings">
            <div class="finetune-settings-inline">
              <label for="finetune_name" class="form-label">Finetune Name:</label>
              <input type="text" class="validate form-control" id="finetune_name" maxlength="30">
            </div>

            <div class="finetune-settings-inline">
              <label class="form-label">Do you have a large codebase?</label>
              <div class="btn-group" role="group" aria-label="basic radio toggle button group">
                <input type="radio" class="btn-check" name="trainable_embeddings" id="trainable_embeddings1" value="1" autocomplete="off">
                <label class="btn btn-outline-primary" for="trainable_embeddings1">Yes, train embeddings (unstable with vllm)</label>
                <input type="radio" class="btn-check" name="trainable_embeddings" id="trainable_embeddings0" value="0" autocomplete="off" checked>
                <label class="btn btn-outline-primary" for="trainable_embeddings0">Keep it smaller, don't</label>
              </div>
            </div>

            <div class="finetune-settings-options">
              <div></div>
              <button type="button" class="finetune-tab-settings-default btn btn-secondary">Reset to defaults</button>
            </div>

            <div class="finetune-settings-inline finetune-settings-inline-gpus">
              <label class="form-check-label">
                GPUs
              </label>
              <div class="finetune-settings-gpus">
                <div class="btn-group gpu-group" role="group">
                </div>
              </div>
            </div>

            <div class="finetune-settings-inline finetune-settings-inline-low">
              <input tabindex="-1" class="form-check-input" type="checkbox" name="low_gpu_mem_mode_finetune" value="" id="low_gpu_mem_mode_finetune">
              <label class="form-check-label" for="low_gpu_mem_mode_finetune">
                Low GPU memory mode (< 24Gb)
              </label>
            </div>

          </div>

          <div class="finetune-settings-error d-none"></div>
        </div>
        <div class="modal-footer">
          <button class="finetune-tab-settings-submit btn btn-primary">Launch</button>
        </div>
      </div>
    </div>
  </div>

  <!-- <div class="modal fade" id="finetune-tab-autorun-settings-modal" tabindex="-1" aria-labelledby="finetune-tab-autorun-settings-modal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Autorun Settings</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <h5>Limit training time</h5>
          <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
            <input type="radio" class="fine-tune-input btn-check" name="limit_training_time_minutes" value="30"
              id="btnradio1" autocomplete="off" checked>
            <label class="btn btn-outline-primary" for="btnradio1">30 min</label>

            <input type="radio" class="fine-tune-input btn-check" name="limit_training_time_minutes" value="60"
              id="btnradio2" autocomplete="off">
            <label class="btn btn-outline-primary" for="btnradio2">60 min</label>

            <input type="radio" class="fine-tune-input btn-check" name="limit_training_time_minutes" value="120"
              id="btnradio3" autocomplete="off">
            <label class="btn btn-outline-primary" for="btnradio3">120 min</label>

            <input type="radio" class="fine-tune-input btn-check" name="limit_training_time_minutes" value="240"
              id="btnradio4" autocomplete="off">
            <label class="btn btn-outline-primary" for="btnradio4">240 min</label>
          </div>
          <div class="row mt-4">
            <div class="btn-group" role="group">
              <input type="checkbox" class="btn-check" name="training_monday" value="M" id="btn1" autocomplete="off">
              <label class="btn btn-outline-primary" for="btn1">M</label>
              <input type="checkbox" class="btn-check" name="training_tuesday" value="T" id="btn2" autocomplete="off">
              <label class="btn btn-outline-primary" for="btn2">T</label>
              <input type="checkbox" class="btn-check" name="training_wednesday" value="W" id="btn3" autocomplete="off">
              <label class="btn btn-outline-primary" for="btn3">W</label>
              <input type="checkbox" class="btn-check" name="training_thursday" value="Th" id="btn4" autocomplete="off">
              <label class="btn btn-outline-primary" for="btn4">Th</label>
              <input type="checkbox" class="btn-check" name="training_friday" value="F" id="btn5" autocomplete="off">
              <label class="btn btn-outline-primary" for="btn5">F</label>
              <input type="checkbox" class="btn-check" name="training_saturday" value="Sa" id="btn6" autocomplete="off">
              <label class="btn btn-outline-primary" for="btn6">Sa</label>
              <input type="checkbox" class="btn-check" name="training_sunday" value="Su" id="btn7" autocomplete="off">
              <label class="btn btn-outline-primary" for="btn7">Su</label>
            </div>
          </div>
          <div class="row mt-4 align-items-center">
            <div class="col">
              <input class="form-check-input fine-tune-input" type="checkbox" id="night_run">
              <label class="form-check-label" for="night_run">
                Run at night
              </label>
            </div>
            <div class="col">
              <select class="form-select fine-tune-input night-time" aria-label="Default select example">
              </select>
            </div>
          </div>

          <div class="store-block mt-3">
            Store<input type="number" value="3" class="fine-tune-input form-control store-input"> finished runs
          </div>
        </div>
        <div class="modal-footer">
          <button class="finetune-tab-autorun-settings btn btn-primary">Save settings</button>
        </div>
      </div>
    </div>
  </div> -->

  <div class="modal fade" id="finetune-tab-model-warning-modal" tabindex="-1" aria-labelledby="finetune-tab-invalid-model-modal" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="urlModalLabel">Warning</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="mb-3" id="model-warning-message"></div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="download-lora-modal" tabindex="-1" aria-labelledby="download-lora-modal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="urlModalLabel">Download Finetune</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="download-lora-modal-body" id="download-lora-modal-body">
            <div class="download-lora-modal-inline">
              <button type="button" class="download-lora-modal-submit submit btn btn-primary">Download LoRA</button>
              <div>Download LoRA. Click here if not sure. Only one checkpoint (the best or selected) will be downloaded.</div>
            </div>
            <div class="download-lora-modal-inline">
              <button type="button" class="download-merge-modal-submit submit btn btn-primary">Download Combined Weights</button>
              <div>Download the combined weights of the base model and LoRA in a new model you can load in <code>transformers</code>.</div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        </div>
      </div>
    </div>
  </div>

</div>
